Tengo una calculadora de ángulo crítico como componente de ReactJs. Pero recibo esta advertencia al hacer clic en el botón Calcular: The specified value "Result" cannot be parsed or is out of range. ¿Alguien puede señalar el error? El código para el Componente se menciona a continuación:
const CriticalAngle = () => { const [n1, setN1] = useState(null); const [n2, setN2] = useState(null); const [result, setResult] = useState(null); const calcResult=()=>{ setResult(57.29578*Math.asin(n2/n1)); } return ( <> <Form> <Form.Group className="mb-4"> <Form.Label>Refractive Index of Incident Medium(Denser Medium)</Form.Label> <Form.Control type="number" placeholder="Enter the value of n1" onChange={(e) => setN1(Number(e.target.value))} value={n1 === null ? "" : n1} /> </Form.Group> <Form.Group className="mb-4"> <Form.Label>Refractive Index of Refractive Medium(Rarer Medium)</Form.Label> <Form.Control type="number" placeholder="Enter the value of n2" onChange={(e) => setN2(Number(e.target.value))} value={n2 === null ? "" : n2} /> </Form.Group> <Form.Group className="mb-4"> <Form.Label>Critical Angle</Form.Label> <Form.Control type="number" disabled="true" value={result === null ? "Result" : result} /> </Form.Group> </Form> <div className="button-custom-grp"> <Button variant="primary" onClick={calcResult}> Calculate </Button> </div> </> ) }Bueno, no sé cuáles son esas etiquetas, pero aquí está mi conjetura...
El control del ángulo crítico está marcado como type="number" , por lo tanto, no le gustan los valores que no son numéricos, como lo es la cadena "Resultado".
En su lugar, podrías intentar algo como esto. Usé una etiqueta Form.Label para envolver la cadena "Resultado", pero creo que hay algo mejor.
<Form.Group className="mb-4"> <Form.Label>Critical Angle</Form.Label> {result === null ? ( <Form.Label>Result</Form.Label> ) : ( <Form.Control type="number" disabled="true" value={result === null ? "Result" : result} /> ) } </Form.Group>No puedo ayudar más que esto.